<template>
  <div
    id="talent_05"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false"
  >
    <p class="data_time">
      <span>数据更新时间：</span><span>2020-08-02 05:00</span>
    </p>
    <section class="type mb_20 mt_30">
      <time_options v-model="value03" :radio_values="['日榜']" />
      <section class="input_group">
        <input
          type="text"
          v-model="input01"
          placeholder="请输入关键词在排行榜中搜索"
          @keyup.enter="search_input()"
        />
        <div @click="search_input()">
          <img src="../../../assets/meng/search01.png" />
        </div>
      </section>
      <div class="btn_group ">
        <button @click="generatorImage">
          <img src="../../../assets/meng/star_map05.png" />分享
        </button>
        <button @click="export_data">
          <img src="../../../assets/meng/star_map04.png" />导出
        </button>
      </div>
    </section>
    <table class="table" ref="capture">
      <thead>
        <tr>
          <th>排名</th>
          <th class="th">达人</th>
          <th>达人粉丝增量</th>
          <th class="th">PK达人</th>
          <th>PK达人粉丝增量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in table_data01" :key="'table' + index">
          <td class="td td_01">
            {{ item.rank }}
          </td>
          <td class="td td_02">
            <div>
              <img
                :src="item.logo"
                class="pointer"
                @click="go_to_page01(item.authorId)"
              />
              <section>
                <div>
                  <span
                    class="dot pointer"
                    @click="go_to_page01(item.authorId)"
                    >{{ item.nickName }}</span
                  >
                  <img
                    v-if="item.isShop == 1"
                    src="../../../assets/meng/search_result01.png"
                  />
                  <img
                    v-if="item.verifyType == 1"
                    src="../../../assets/meng/search_result02.png"
                  />
                  <img
                    v-if="item.verifyType == 2"
                    src="../../../assets/meng/search_result03.png"
                  />
                </div>
                <div>粉丝数：{{ format_num(item.totalFans) }}</div>
              </section>
            </div>
          </td>
          <td class="td td_03">
            <div>
              <img
                :class="{ gray_img: item.rankInc == 0 }"
                :src="
                  '../../../../static/meng/fans0' +
                    (item.rankInc > 0 ? 2 : item.rankInc < 0 ? 3 : 1) +
                    '.png'
                "
              />
              <span
                :class="{
                  gray: item.rankInc == 0,
                  red: item.rankInc > 0,
                  blue: item.rankInc < 0
                }"
                >{{ Math.abs(item.rankInc) }}</span
              >
            </div>
          </td>
          <td class="td td_04">
            <div>
              <img :src="item.logo" />
              <section>
                <div>
                  <span class="dot">{{ item.nickName }}</span>
                  <img
                    v-if="item.isShop == 1"
                    src="../../../assets/meng/search_result01.png"
                  />
                  <img
                    v-if="item.verifyType == 1"
                    src="../../../assets/meng/search_result02.png"
                  />
                  <img
                    v-if="item.verifyType == 2"
                    src="../../../assets/meng/search_result03.png"
                  />
                </div>
                <div>粉丝数：{{ format_num(item.totalFans) }}</div>
              </section>
            </div>
          </td>
          <td class="td td_05">
            <div>
              <img
                :class="{ gray_img: item.rankInc == 0 }"
                :src="
                  '../../../../static/meng/fans0' +
                    (item.rankInc > 0 ? 2 : item.rankInc < 0 ? 3 : 1) +
                    '.png'
                "
              />
              <span
                :class="{
                  gray: item.rankInc == 0,
                  red: item.rankInc > 0,
                  blue: item.rankInc < 0
                }"
                >{{ Math.abs(item.rankInc) }}</span
              >
            </div>
          </td>

          <td class="td td_06">
            <button @click="go_to_page01(item.authorId)">查看详情</button>
          </td>
        </tr>
      </tbody>
    </table>
    <p class="permissions " v-if="!permissions">
      当前为免费版会员，仅可查看100个结果，立即<span
        @click="$router.push('/talent_main/buy')"
        >升级会员版本</span
      >，可查看更多数据
    </p>

    <div
      v-loading="loading"
      v-if="loading && !(table_data01.length < (page01 - 1) * 30)"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <p
      class="nothing"
      v-show="
        table_data01.length != 0 && table_data01.length < (page01 - 1) * 50
      "
    >
      我是有底线的～
    </p>
    <div class="empty" v-show="!loading && table_data01.length == 0">
      <img src="@/assets/liu/zw.png" />
      <p>暂无数据</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "talent_05",
  components: {},
  data() {
    return {
      permissions: 1,
      value03: "日榜",
      busy: false,
      loading: true,
      table_data01: [],
      page01: 1,
      cancel01: null,
      input01: ""
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    search_input() {
      this.page01 = 1;
      this.table_data01 = [];
      this.get_data();
    },
    get_data() {
      let that = this;
      this.loading = true;
      this.busy = true;
      let category;
      this.$store.state.classify_options[0].map((item, index) => {
        if (item == this.value08) {
          category = this.$store.state.classify_options[1][index];
        }
      });

      this.$axios
        .post(
          "/api/author/FindBlueVRanks",
          {
            Category: category,
            RankType:
              that.value03.split("?")[0] == "日榜"
                ? 1
                : that.value03.split("?")[0] == "周榜"
                ? 2
                : 3,
            FansNum: that.value04,
            IsShop: that.value05 != "" ? 1 : 0,
            Time: that.value03.split("?")[1],
            Keyword: that.input01,
            Size: 50,
            Index: that.page01
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01) that.cancel01();
              that.cancel01 = c;
            })
          }
        )
        .then(response => {
          this.loading = false;
          if (response.data.code == 1003) {
            this.permissions = 0;
          }
          if (response.data.code == 0) {
            // console.log(response.data.data)
            this.page01 += 1;
            this.table_data01 = this.table_data01.concat(
              response.data.data.masters
            );
            response.data.data.masters.length < 50
              ? (this.busy = true)
              : (this.busy = false);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    generatorImage() {
      var that = this;
      const loading = this.$loading({
        lock: true,
        text: "导出中...",
        spinner: "el-icon-loading",
        customClass: "customClass"
      });
      var shareContent;
      shareContent = this.$refs.capture; //需要截图的包裹的（原生的）DOM 对象
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
      var scale = 1;
      canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale * scale; //定义canvas高度 *缩放
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      var opts = {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas, //自定义 canvas
        logging: true //日志开关
      };
      html2canvas(shareContent, opts).then(canvas => {
        let str;
        str = `《达人粉丝榜-${that.my_radio01}-${
          that.value03.split("?")[0]
        }》.png`;
        canvas.toBlob(
          function(blob) {
            const eleLink = document.createElement("a");
            eleLink.download = str;
            eleLink.style.display = "none";
            // 字符内容转变成blob地址
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
          },
          "image/png",
          1
        );
        loading.close();
      });
    },
    export_data() {
      let that = this;
      let str = `排名,排名变动,达人,抖音号,掌上指数,粉丝总数,平均点赞,平均评论,平均转发\n`;
      for (let i = 0; i < that.table_data01.length; i++) {
        str += `${that.table_data01[i].rank},${
          that.table_data01[i].change
        },\"${that.table_data01[i].nickName.replace(/"/g, '""')}\",${
          that.table_data01[i].uniqueId
        }\t,${that.format_num(that.table_data01[i].hint)},${that.format_num(
          that.table_data01[i].totalFans
        )},${that.format_num(
          that.table_data01[i].favoriteIncr
        )},${that.format_num(
          that.table_data01[i].commentIncr
        )},${that.format_num(that.table_data01[i].shareIncr)}\n`;
      }
      var blob = new Blob([str], { type: "text/plain;charset=utf-8" }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement("a");
      link.href = object_url;
      let str_name = `《蓝V认证榜-${that.value03.split("?")[1]}》.csv`;
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    loadMore: function() {
      if (this.page01 == 31) {
        return false;
      }
      this.get_data();
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, "_blank");
    }
  }
};
</script>
<style scoped lang="less">
.data_time {
  margin-top: -32px;
  margin-bottom: 32px;
  text-align: right;
  > span:first-child {
    font-size: 14px;
    letter-spacing: 0;
    color: #888888;
    margin-right: 9px;
  }
  > span:last-child {
    font-size: 15px;
    letter-spacing: 0;
    // font-family: DINAlternate-Bold;
    color: #1779ff;
  }
}
.table {
  width: 100%;
  .th {
    text-align: left !important;
    padding-left: 7%;
  }
  tbody {
    tr {
      height: 80px;
    }
  }

  .td_06 {
    text-align: center;
    button {
      width: 88px;
      height: 32px;
      background-color: #fd7f2c;
      border-radius: 4px;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 30px;
      letter-spacing: 0px;
      color: #ffffff;
      text-align: center;
    }
  }

  .td_01,
  .td_05,
  .td_03 {
    font-family: DINAlternate-Bold;
    font-size: 16px;
    text-align: center;
  }
  .td_03,
  .td_05 {
    img {
      width: 8px;
      height: 12px;
      margin-top: -3px;
      margin-left: 8px;
      margin-right: 6px;
    }
    span {
      font-size: 16px;
      vertical-align: 1px;
    }
    .gray_img {
      width: 12px !important;
      height: 8px !important;
      margin-left: 6px !important;
      margin-right: 4px !important;
    }
  }
  .td_02,
  .td_04 {
    width: 27%;
    > div {
      section {
        width: 210px;
        > div:first-child {
          display: flex;
          align-items: center;
          > span {
            max-width: 100%;
            width: auto;
            word-break: break-all;
            font-size: 16px;
            color: #222222;
            margin-bottom: 5px;
          }

          img {
            width: 14px;
            height: 14px;
            margin-left: 6px;
          }
        }
        > div:last-child {
          width: 100%;
          word-break: break-all;
          font-size: 14px;
          color: #555555;
        }
      }
      > img {
        border-radius: 50%;
        width: 50px;
        margin-right: 12px;
        border: 1px solid #e5e5e5;
      }
    }
  }

  .td_01 {
    width: 8.2%;
  }
  .td {
    > div {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.type {
  > div {
    display: inline-block;
  }
  .input_group {
    display: inline-block;
    margin-left: 26px;
    position: relative;
    width: 308px;
    height: 32px;
    border-radius: 4px 4px 4px 4px;
    border: solid 1px #e5e5e5;
    box-sizing: border-box;
    input {
      width: 100%;
      font-size: 14px;
      vertical-align: -1px;
      background-color: #f5f5f5;
      height: 100%;
      box-sizing: border-box;
      padding-left: 11px;
      padding-right: 38px;
      border: none;
    }
    > div {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: -1px;
      text-align: center;
      width: 38px;
      height: 32px;
      background-color: #fd7f2c;
      border-radius: 0px 4px 4px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 15px;
      }
    }
  }
  .btn_group {
    text-align: right;
    float: right;
    button {
      width: 70px;
      height: 32px;
      background-color: #f8f8f8;
      border-radius: 4px;
      border: solid 1px #e6e6e6;
      font-size: 14px;
      // line-height: 30px;
      box-sizing: border-box;
      color: #222222;
      text-align: center;
    }
    > button:nth-child(1) {
      margin-right: 10px;
      img {
        width: 14px;
        vertical-align: -1px;
        margin-right: 6px;
      }
    }
    > button:nth-child(2) {
      img {
        width: 13px;
        vertical-align: -1px;
        margin-right: 6px;
      }
    }
  }
}
#talent_05 {
  width: 100%;
}
</style>
